<template>
    <view class="pet-details">
        <scroll-view class="form-content" scroll-y>
            <uni-forms label-position="top">
                <uni-forms-item label-width="100%" required label="你如何称呼 ta ?">
                    <uni-easyinput v-model="form.name" type="text" placeholder="请输入姓名" primaryColor="#4AB8AC" />
                </uni-forms-item>
                <uni-forms-item required name="hobby" label="性别">
                    <uni-data-select v-model="form.birthday" :localdata="range"></uni-data-select>
                </uni-forms-item>
                <uni-forms-item required name="hobby" label="出生日期">
                    <uni-data-select v-model="form.birthday" :localdata="range"></uni-data-select>
                </uni-forms-item>
                <uni-forms-item required name="hobby" label="体重">
                    <view class="weight">
                        <view class="weight-input">
                            <uni-easyinput v-model="form.name" type="text" placeholder="请输入姓名" />
                        </view>
                        <view class="weight-unit">
                            <view class="button">kg</view>
                            <view class="button">g</view>
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item label-width="100%" required name="hobby" label="是否已经绝育?">
                    <uni-data-select v-model="form.birthday" :localdata="range" placement="top"></uni-data-select>
                </uni-forms-item>
            </uni-forms>
        </scroll-view>
        <view class="buttons">
            <i-button type="primary" plain @click="onPreStep" style="width: 100%">上一步</i-button>
            <i-button type="primary" @click="onNextStep" style="width: 100%">下一步</i-button>
        </view>
    </view>
</template>

<script setup lang="ts">
type Gender = "male" | "female" | "";

interface PetDetailsForm {
    name: string;
    gender: Gender;
    birthday: string;
    weight: string;
    weightUnit: "kg" | "lb";
    sterilized: boolean;
}

const range = [
    { value: 0, text: "" },
    { value: 1, text: "足球" },
    { value: 2, text: "游泳" }
];

const emits = defineEmits(["pre", "next"]);

const form = reactive<PetDetailsForm>({
    name: "",
    gender: "",
    birthday: "",
    weight: "",
    weightUnit: "kg",
    sterilized: false
});

const updateField = (field: keyof PetDetailsForm, value: any) => {
    (form as any)[field] = value;
};

const onPickDate = (e: any) => {
    updateField("birthday", e?.detail?.value || "");
};

const canNext = computed(() => {
    return !errors.name && !errors.gender;
});

const onPreStep = () => {
    emits("pre", { type: "step-edit-pet-details", form: { ...form } });
};

const onNextStep = () => {
    const payload = {
        ...form,
        weight: form.weight ? Number(form.weight) : undefined,
        weightUnit: form.weightUnit
    };
    emits("next", { type: "step-edit-pet-details", form: payload });
};

const touched = reactive<Record<string, boolean>>({ name: false, gender: false, weight: false });
const focused = reactive<Record<string, boolean>>({ name: false, weight: false });
const errors = reactive<Record<string, string | "">>({ name: "", gender: "", weight: "" });

const validate = () => {
    errors.name = form.name ? "" : "请输入昵称";
    errors.gender = form.gender ? "" : "请选择性别";
    if (form.weight) {
        const n = Number(form.weight);
        errors.weight = isNaN(n) || n <= 0 ? "请输入大于0的数值" : "";
    } else {
        errors.weight = "";
    }
};

const markTouched = (field: keyof typeof touched) => {
    touched[field] = true;
    validate();
};

validate();
</script>

<style scoped lang="scss">
@import "./index";
</style>
